<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修改银行卡信息</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
    body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #f7fafd; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; background: linear-gradient(180deg, #1a355b 80%, #1976d2 100%); border-radius: 0 18px 18px 0; box-shadow: 2px 0 8px #e3eaf2; padding: 32px 0; margin: 0; display: flex; flex-direction: column; gap: 0; z-index: 100; }
    .sidebar-title { font-size: 26px; font-weight: bold; color: #fff; letter-spacing: 2px; padding: 0 32px 18px 32px; margin-bottom: 10px; border-bottom: 2px solid #fff2; display: flex; align-items: center; gap: 12px; }
    .sidebar ul { list-style: none; padding: 0; margin: 0; }
    .sidebar li { margin: 0 0 8px 0; }
    .sidebar a, .sidebar .sidebar-btn { display: flex; align-items: center; gap: 12px; font-size: 18px; padding: 14px 32px; border-radius: 16px; background: transparent; color: #fff; border: none; transition: 0.2s; text-decoration: none; text-align: left; cursor: pointer; }
    .sidebar a:hover, .sidebar .sidebar-btn:hover, .sidebar .active { background: #fff; color: #1976d2; font-weight: bold; }
    .sidebar .logout { margin-top: 32px; background: #e3eaf2; color: #1976d2; }
    .sidebar .logout:hover { background: #1976d2; color: #fff; }
    .main-content { margin-left: 260px; flex: 1; display: flex; flex-direction: column; align-items: center; background: #f7fafd; min-width: 350px; max-width: 800px; }
    .card { background: #fff; border-radius: 18px; box-shadow: 0 2px 12px #e3eaf2; padding: 36px 48px 32px 48px; margin: 40px 0 0 0; width: 100%; max-width: 600px; }
    .form-row { display: flex; flex-direction: row; gap: 24px; align-items: center; margin-bottom: 18px; }
    .form-row label { min-width: 90px; text-align: right; font-weight: bold; color: #444; }
    .form-row input, .form-row select { padding: 12px 16px; border: 2px solid #e3eaf2; border-radius: 8px; font-size: 16px; width: 200px; box-sizing: border-box; }
    .form-row input:focus, .form-row select:focus { outline: none; border-color: #1976d2; }
    .update-btn { background: #1976d2; color: #fff; border: none; padding: 12px 32px; border-radius: 10px; font-size: 16px; cursor: pointer; transition: 0.2s; margin-left: 10px; }
    .update-btn:hover { background: #1565c0; }
    @media (max-width: 900px) {
      .form-row { flex-direction: column; align-items: stretch; gap: 12px; }
      .form-row label, .form-row input, .form-row select, .form-row button { width: 100%; min-width: 0; }
      .update-btn { margin-left: 0; margin-top: 12px; }
    }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-title"><i class="fa-solid fa-credit-card"></i> 银行卡管理</div>
        <ul>
            <li><a class="sidebar-btn" href="/bankcard_add"><i class="fa-solid fa-plus"></i> 添加银行卡</a></li>
            <li><a class="sidebar-btn" href="/bankcard_list"><i class="fa-solid fa-list"></i> 银行卡列表</a></li>
            <li><a class="sidebar-btn active" href="/bankcard_update"><i class="fa-solid fa-pen-to-square"></i> 修改银行卡信息</a></li>
            <li><a class="sidebar-btn" href="/bankcard_export"><i class="fa-solid fa-download"></i> 导出银行卡数据</a></li>
            <li><a class="sidebar-btn" href="/bankcard_delete"><i class="fa-solid fa-trash"></i> 删除银行卡</a></li>
            <li><a class="sidebar-btn" href="/bankcard_query"><i class="fa-solid fa-search"></i> 银行卡查询</a></li>
        </ul>
        <a href="/admin_menu" class="sidebar-btn logout"><i class="fa-solid fa-arrow-left"></i> 返回管理员菜单</a>
    </div>
    <div class="main-content">
        <div class="card">
            <h2><i class="fa-solid fa-pen-to-square"></i> 修改银行卡信息</h2>
            <form method="post">
                <div class="form-row">
                    <label for="cardID">银行卡号：</label>
                    <input type="text" name="cardID" id="cardID" placeholder="请输入要修改的银行卡号" required>
                    <button type="submit" name="action" value="search" class="update-btn">查询</button>
                </div>
                {% if cardinfo %}
                <div class="form-row">
                    <label for="curID">币种：</label>
                    <select name="curID" id="curID">
                        <option value="RMB" {% if cardinfo.curID=='RMB' %}selected{% endif %}>RMB</option>
                        <option value="USD" {% if cardinfo.curID=='USD' %}selected{% endif %}>USD</option>
                        <option value="EUR" {% if cardinfo.curID=='EUR' %}selected{% endif %}>EUR</option>
                    </select>
                    <label for="savingID">储蓄类型：</label>
                    <select name="savingID" id="savingID">
                        {% for opt in saving_options %}
                        <option value="{{ opt.id }}" {% if cardinfo and cardinfo.savingID==opt.id|string %}selected{% endif %}>{{ opt.id }} - {{ opt.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-row">
                    <label for="cardmima">密码：</label>
                    <input type="text" name="cardmima" id="cardmima" value="{{ cardinfo.cardmima }}" required>
                    <label for="IsReportLoss">挂失状态：</label>
                    <select name="IsReportLoss" id="IsReportLoss">
                        <option value="否" {% if cardinfo.IsReportLoss=='否' or cardinfo.IsReportLoss=='No' %}selected{% endif %}>否</option>
                        <option value="是" {% if cardinfo.IsReportLoss=='是' or cardinfo.IsReportLoss=='Yes' %}selected{% endif %}>是</option>
                    </select>
                </div>
                <div class="form-row">
                    <button type="submit" name="action" value="update" class="update-btn"><i class="fa-solid fa-pen-to-square"></i> 保存修改</button>
                </div>
                {% endif %}
            </form>
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  <div class="flash {{ category }}">{{ message }}</div>
                {% endfor %}
              {% endif %}
            {% endwith %}
        </div>
    </div>
</body>
</html> 